<template>
    <jb-crud-page
        ref="bucketPage"
        title-icon="mdi:account-outline"
        title-text="选择上传到七牛"
        search-url="/api/admin/qiniuBucket/datas"
        :search-conditions="pageConditions"
        :edit-component="BucketEdit"
        :reset-btn-shown="false"
    >
        <template #conditions-form>
            <n-input
                v-model:value="pageConditions.keywords"
                type="text"
                placeholder="输入关键字搜索"
            />

            <jb-select
                v-model:value="pageConditions.qiniuId"
                url="/api/admin/qiniu/options"
                placeholder="=所属账号="
                filterable
                class="w-130px"
            >
            </jb-select>
            <jb-select
                v-model:value="pageConditions.zone"
                url="/api/admin/dictionary/options?typeKey=qiniu_region"
                filterable
                class="w-130px"
                placeholder="=地区="
            >
            </jb-select>
        </template>
        <template #default="{ state }">
            <vxe-table
                border
                :column-config="{ resizable: true }"
                height="auto"
                show-header-overflow
                show-overflow="tooltip"
                :seq-config="{ startIndex: state.tableStartIndex }"
                :row-config="{ isHover: true }"
                align="center"
                :data="state.list"
            >
                <jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
                <jb-column
                    field="name"
                    title="bucket名称"
                    min-width="200"
                    fixed="left"
                ></jb-column>
                <jb-column field="sn" title="编码(SN)" min-width="200"></jb-column>
                <jb-column
                    field="qiniuName"
                    title="所属七牛账号"
                    min-width="200"
                ></jb-column>
                <jb-column
                    field="regionName"
                    title="所属地区"
                    min-width="160"
                ></jb-column>
                <jb-column field="domainUrl" title="绑定域名" min-width="300"></jb-column>
                <jb-column
                    field="callbackUrl"
                    title="回调地址"
                    min-width="300"
                ></jb-column>
                <jb-column
                    field="callbackBody"
                    title="回调body定义"
                    min-width="300"
                ></jb-column>
                <jb-column
                    field="callbackBodyType"
                    title="回调body类型"
                    min-width="300"
                ></jb-column>
                <jb-column field="expires" title="有效期(妙)" min-width="160"></jb-column>

                <jb-column field="isDefault" title="是否默认" width="80">
                    <template #default="{ row }">
                        <span :class="{ 'text-success': row.isDefault }">{{
                            row.isDefault ? '是' : '否'
                        }}</span>
                    </template>
                </jb-column>
                <jb-column title="操作" width="110" fixed="right">
                    <template #default="{ row }">
                        <jb-btn
                            icon="carbon:choose-item"
                            secondary
                            type="primary"
                            class="mx-8px"
                            confirm-text="确定上传到这里吗？"
                            @confirm="choose(row.id)"
                            >选择</jb-btn
                        >
                    </template>
                </jb-column>
            </vxe-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from 'vue'
import { useRoute } from 'vue-router'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import BucketEdit from './components/bucket-edit/index.vue'

const route = useRoute()

const bucketPage = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = useResetableData({
    keywords: '',
    qiniuId: '',
    zone: '',
    enable: true
})
onBeforeMount(async () => {
    pageConditions.qiniuId = route.query?.qiniuId as string
})

const emit = defineEmits<{
    (e: 'choose', id: string): void
}>()

/**
 * 选中某一个Bucket
 * @param bucketId
 */
function choose(bucketId: string) {
    emit('choose', bucketId)
}
</script>

<style scoped></style>
